<script setup>
import FanButton from '..';

const copySomething = () => console.log(555);
</script>

<template>
  <demo-block title="基础用法">
    <FanButton icon="check" @click="copySomething"></FanButton>
    <FanButton icon="check" icon-position="right">按钮</FanButton>
    <FanButton disabled>按钮</FanButton>
    <FanButton disabled plain>按钮</FanButton>
  </demo-block>

  <demo-block title="大小">
    <FanButton height="24px" text-size="12px" padding="0 4px">按钮</FanButton>
    <FanButton height="32px">按钮</FanButton>
    <FanButton icon="check">按钮</FanButton>
    <FanButton width="118px" height="50px" text-size="16px">大大按钮</FanButton>
  </demo-block>

  <demo-block title="block+loading">
    <FanButton block loading icon-size="20">按钮</FanButton>
    <FanButton
      block
      loading
      icon-size="20"
      loading-text="加载中"
      style="margin-top: 10px"
      >按钮</FanButton
    >
  </demo-block>

  <demo-block title="加粗、颜色">
    <FanButton bold bg="orange" :text-size="16">按钮</FanButton>
    <FanButton bold bg="linear-gradient(45deg, red, black)" :text-size="16"
      >按钮</FanButton
    >
    <FanButton
      bold
      bg="url(https://img.dac6.cn/users/0/0/cf2554552fa733ea7586e92485840068.jpg) center / cover no-repeat"
      :text-size="16"
      >按钮</FanButton
    >
  </demo-block>

  <demo-block title="朴素按钮">
    <FanButton plain>按钮</FanButton>
    <FanButton plain color="red">按钮</FanButton>
    <FanButton plain color="red" hairline>按钮</FanButton>
    <FanButton plain color="red" :border="false">按钮</FanButton>
  </demo-block>
</template>
